<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>模拟</span>
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          @click="startWork"
          >发起流程</el-button
        >
         <el-button
          style="float: right; padding: 3px 0;margin-right:10px"
          type="text"
          @click="$router.push({ path: '/workflow/list' })"
          >返回</el-button
        >
      </div>
      <div>
        <el-input
          type="textarea"
          :rows="5"
          placeholder="表单json数据 "
          v-model="formData"
        ></el-input>
      </div>
    </el-card>

    <el-card
      class="box-card"
      v-for="(workHistory, index) in workHistories"
      :key="index"
      style="margin-top:10px;"
    >
      <div slot="header" class="clearfix">
        <span>审批</span>
      </div>
      <div v-for="step in workHistory.worksteps" :key="step.id">
        <strong>{{ step.nodeName }}：</strong>
        <span>{{ step.handleUser.name }}</span>
        <span>--{{ step.hendlerType }}</span>
        <el-button
          style=" padding: 3px 0;margin-left:10px"
          type="text"
          @click="rejectApprove(step.id,step)"
          v-if="handlers.indexOf(step.id) > -1"
          >拒绝</el-button
        >
        <el-button
          style="padding: 3px 0;margin-left:10px"
          type="text"
          @click="passApprove(step.id,step)"
          v-if="handlers.indexOf(step.id) > -1"
          >通过</el-button
        >
        <el-button
          style="padding: 3px 0;margin-left:10px"
          type="text"
          @click="withdrawProve(step.id,step)"
          v-if="handlers.indexOf(step.id) ==-1&&step.hendlerType"
          >撤回</el-button
        >
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "workflow-simulation",
  props: {
    workflowName: {
      default: "测试流程"
    },
    workflowId: {
      default: "1"
    }
  },
  computed: {
    id() {
      return this.$route.query.id || this.workflowId;
    },
    name() {
      return this.$route.query.name || this.workflowName;
    }
  },
  data() {
    return {
      formData: "",
      workTaskId: "",
      handlers: [],
      loading: false,
      workHistories: [
        {
          worksteps: [
            {
              id: "id",
              nodeId: "nodeId",
              node: {
                id: "",
                name: "节点名称"
              },
              handleUser: {
                id: "",
                name: "处理人"
              },
              nodeName: "nodeName",
              workTaskId: "workTaskId"
            }
          ]
        }
      ]
    };
  },
  components: {},
  mounted() {
    this.clearSimulationRecord();
  },
  methods: {
    goback() {
      this.$navtab.close(this.$route.fullPath);
    },
    rendSteps(steps) {
      debugger;
      if (steps.length == 0) return;
      this.handlers = [];
      let _this = this;
      steps.forEach(element => {
        _this.handlers.push(element.id);
      });

      this.workHistories.unshift({
        worksteps: steps
      });
    },
    clearSimulationRecord() {
      this.$store.dispatch("workflow/clearSimulationRecord").then(res => {});
    },
    startWork() {
      this.loading = true;
      this.workHistories = [];
      const data = {
        workflowId: {
          versionId: Number(this.$route.query.versionId),
          id:this.$route.query.id
        },
        name: "模拟流程",
        formData: this.formData
      };
      let _this = this;
      this.$store
        .dispatch("workflow/createWorkTask", data)
        .then(res => {
          _this.workTaskId = res.id;
          return res;
        })
        .then(task => {
          debugger;
          const data = {
            workTaskId: task.id
          };
          this.$store.dispatch("workflow/startWorkTask", data).then(res => {
            _this.rendSteps(res);
            _this.loading = false;
          });
        });
    },
    passApprove(stepid,step) {
       
      this.loading = true;
      const data = {
        workTaskId: this.workTaskId,
        stepId: stepid,
        comment: "同意",
        resourceIds: ""
      };
      let _this = this;
      
      this.$store.dispatch("workflow/passProve", data).then(res => {
        _this.loading = false;
        _this.rendSteps(res);
        this.$set(step,'hendlerType','通过')
        _this.handlers = _this.handlers.filter(id => id != stepid);
      });
    },
    rejectApprove(stepid,step) {
      
      this.loading = true;
      const data = {
        workTaskId: this.workTaskId,
        stepId: stepid,
        comment: "拒绝",
        resourceIds: ""
      };
      let _this = this;
      
      this.$store.dispatch("workflow/rejectProve", data).then(res => {
        _this.loading = false;
        _this.rendSteps(res);
        this.$set(step,'hendlerType','拒绝')
        _this.handlers = _this.handlers.filter(id => id != stepid);
      });
    },
    withdrawProve(stepid,step) {
      
      this.loading = true;
      const data = {
        workTaskId: this.workTaskId,
        stepId: stepid,
        comment: "撤回",
        resourceIds: ""
      };
      let _this = this;
      
      this.$store.dispatch("workflow/withdrawProve", data).then(res => {
        _this.loading = false;
        this.$set(step,'hendlerType','撤回')
        _this.handlers = _this.handlers.filter(id => id != stepid);
        _this.rendSteps(res);
      });
    }
  }
};
</script>

<style></style>
